<template>
  <div class="UploadLoad justifyAlignB">
    <el-dialog  v-dialogDrag   title="导入操作进行中请稍后…" :visible.sync="dialogVisible" text-align:center width="50%" :before-close="handleClose">
       <div v-if="is_Message" style="display: flex; align-items: center"><h4 class="justifyAlign">当前操作存在在途数据，请等待</h4></div>
      <el-progress v-if="!loading" :percentage="num" />
    </el-dialog>
  </div>
</template>

<script>
import {
  getSubmitPercent
} from "@/api/unitSalaryReport/unitSalaryReport";
export default {
  name: 'uploadLoadImport',
  components: {},
  props: {
    guid: {
      type: String,
      default:function(){
        return ''
      }
    },
     Executing: {
      type: String,
      default:function(){
        return ''
      }
    }
  },
  data() {
    return {
      that: this,
      dialogVisible: true,
      num: 0,
      timer: null,
      is_Message: false,
      loading: true,
      params:[]
    }
  },
  mounted() {
      this.getMessage()
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    getMessage() {
        this.is_Message=false
        if (this.guid) {
            this.loading = false
            this.timer = setInterval(this.getProgresss, 500)
        }
        if(this.Executing){
          this.guid=this.Executing
          this.is_Message=true
            this.loading = false
            this.timer = setInterval(this.getProgresss, 500)
        }
    },
    getProgresss() {
      let tmp = {
        "uuid": this.guid
      }
      getSubmitPercent(tmp).then(res => {

         if (res.data || res.data === 0) {    

           if(res.data=='S'|| res.data.indexOf('W') !== -1){
             this.num = parseInt(Number(100))
           }else if(res.data=='F' || res.data.indexOf('F') !== -1){
             this.num = parseInt(Number(0))
           }else{
             this.num = parseInt(Number(res.data * 100).toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, "$1,")) 
           }
           // 成功res.data.indexOf('S') !== -1
           if (res.data=='S' || res.data == 1) {
             clearInterval(this.timer)
             setTimeout(() =>{
              this.$message({
              showClose: true,
              message: '导入完成',
              type: 'success',
              duration: 4000
              })
              this.$emit('close', 1)
             },1000)
           }
           if (res.data=='F' || res.data.indexOf('F') !== -1) {
             clearInterval(this.timer)
             setTimeout(() =>{
              this.$message({
              showClose: true,
              dangerouslyUseHTMLString: true,
              message: res.data.substring(2)+'导入失败',
              type: 'error',
              duration: 0
              })
              this.$emit('close', 1)
             },1000)
           }
           if (res.data=='W' || res.data.indexOf('W') !== -1) {
             clearInterval(this.timer)
             setTimeout(() =>{
              this.$message({
              showClose: true,
              dangerouslyUseHTMLString: true,
              message:'导入成功，但部分人员工资项存在问题</br>'+ res.data.substring(2),
              type: 'warning',
              duration: 0
              })
              this.$emit('close', 1)
             },1000)
           }
         } 
      })
    },
    handleClose() {
      this.$emit('close', 1)
      this.is_Message=false
    }
  }
}
</script>
<style lang="scss">
    .justifyAlign{
        text-align-last:justify;

        text-align:justify;

        text-justify:distribute-all-lines; // 这行必加，兼容ie浏览器

        width: 300px;
    }
    .justifyAlignB b{
      width:30px;
      text-align:center;
    }
    .el-dialog__header {
    padding: 20px;
    padding-bottom: 10px;
    text-align: center;
}
</style>
